<template>
  <div class="editor">
    <div class="header">
      <div class="exit">
        <el-popconfirm
          title="确定退出？如有内容变更，请先保存！"
          @confirm="$router.back()"
        >
          <template #reference>
            <el-button icon="el-icon-close" size="mini"></el-button>
          </template>
        </el-popconfirm>
        <div class="inputFrom">
          <el-input v-model="title" placeholder="请输入文章标题" />
        </div>
      </div>
      <div class="publish">
        <el-button type="primary" @click="publish">发布</el-button>
        <el-dropdown @command="dropdownChange">
          <span class="el-dropdown-link">
            <i class="el-icon-more" style="margin: 0 10px"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="查看" disabled>查看</el-dropdown-item>
            <el-dropdown-item command="设置">设置</el-dropdown-item>
            <el-dropdown-item command="保存草稿">保存草稿</el-dropdown-item>
            <el-dropdown-item command="删除" :disabled="!item.id"
              >删除</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 编辑器 -->
    <v-md-editor v-model="text" height="100%"></v-md-editor>
    <!-- 抽屉 -->
    <el-drawer title="文章设置" :visible.sync="drawer" :direction="direction">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文章摘要">
          <el-input
            type="textarea"
            v-model="form.desc"
            placeholder="请输入文章摘要"
          ></el-input>
        </el-form-item>
        <el-form-item label="访问密码">
          <el-input
            v-model="form.password"
            type="password"
            :show-password="true"
            placeholder="输入后查看需要密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="付费查看">
          <el-input
            v-model="form.money"
            type="password"
            :show-password="true"
            placeholder="输入后需要支付的费用"
          ></el-input>
        </el-form-item>
        <el-form-item label="开启评论">
          <el-switch v-model="form.isComment"></el-switch>
        </el-form-item>
        <el-form-item label="首页推荐">
          <el-switch v-model="form.isHome"></el-switch>
        </el-form-item>
        <el-form-item label="选择分类">
          <el-select v-model="form.type">
            <el-option
              v-for="item in classifyList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择标签">
          <el-select v-model="form.tag">
            <el-option
              v-for="item in tagList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="publish()">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "", //文章标题
      text: "", //编辑器输入的内容
      drawer: false, //控制抽屉的显示
      direction: "rtl", //打开的方向
      state: "已发布",
      form: {
        content: "",
        password: "",
        money: "",
        isComment: null,
        isHome: null,
        type: "",
        tag: "",
      },
      classifyList: [],
      tagList: [],
      item: {},
    };
  },
  created() {
    this.getClassifyList();
    this.getTagList();
    if (this.$route.query.item) {
      let obj = this.$route.query.item;
      this.item = obj;
      this.title = obj.title;
      this.text = obj.text;
      (this.form.content = obj.content),
        (this.form.password = obj.password),
        (this.form.money = obj.money),
        (this.form.isComment = obj.isComment),
        (this.form.isHome = obj.isHome),
        (this.form.type = obj.type),
        (this.form.tag = obj.tag);
    }
  },
  computed: {},
  methods: {
    // 发布
    publish() {
      this.$api
        .addArticle({
          title: this.title,
          text: this.text,
          state: this.state,
          ...this.form,
        })
        .then((res) => {
          if (res.success) {
            this.$message({
              message: "发布成功",
              type: "success",
            });
            // 关闭抽屉
            this.drawer = false;
          }
        });
    },
    // 点击下拉菜单的选项
    dropdownChange(val) {
      switch (val) {
        case "设置":
          // 打开抽屉
          this.drawer = true;
          break;
        case "保存草稿":
          this.state = "草稿";
          break;
        case "删除":
          this.$api
            .delArticle({
              id: this.item.id,
            })
            .then((res) => {
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
              }
            });
          break;
        default:
          break;
      }
    },
    // 获取分类列表
    getClassifyList() {
      this.$api.getClassifyList().then((res) => {
        this.classifyList = res.data;
      });
    },
    // 获取标签列表
    getTagList() {
      this.$api.getTagList().then((res) => {
        this.tagList = res.data;
      });
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.editor {
  width: 100%;
  height: 100%;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 16px 24px;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    .exit {
      display: flex;
      button {
        height: 100%;
      }
    }
  }
}
</style>